import style from '@/assets/components.module.scss';

import { TopNavigate, useTouchBottom } from '@/components';
import { HttpResponse } from '@/utils';

export interface ProjectProps {
    children?: string | React.ReactElement | React.ReactElement[];
}

function Rcomments({ page, id }: { page: number; id: number }) {
    const { data: res } = useSwr<
        HttpResponse<
            {
                comt: {
                    text: string;
                    title: string;
                    createtime: string;
                };
                user: {
                    avatar: string;
                    name: string;
                    email: string;
                };
            }[]
        >
    >(`com/${id}/${page}`, axios.get);

    const ls = ObjectUtils.wantArray(res?.data);

    return (
        <div>
            {ls.map((item) => (
                <div key={Math.random()} className={style['comt']}>
                    <div className={style['header']}>
                        <div className={style['avatar']}>
                            <img src={item.user.avatar} />
                        </div>
                        <div>
                            <p>
                                <span className='mr-3 font-bold'>
                                    {item.user.name}
                                </span>
                                <span className='text-gray-500'>
                                    @{item.user.email}
                                </span>
                            </p>
                            <p>{item.comt.createtime}</p>
                        </div>
                    </div>
                    <div>
                        <p>{item.comt.text}</p>
                    </div>
                </div>
            ))}
        </div>
    );
}

function Project({ children }: ProjectProps) {
    console.log(time().format('{YYYY} HH:mm:ss'), `NAME render`);
    const { id } = useParams();

    const [bottom] = useTouchBottom(0);
    const [page, set_page] = useState(1);
    const [name, set_name] = useState('');
    const [show, set_show] = useState(false);
    const [trends, set_trends] = useState<React.ReactElement[]>([]);

    useEffect(() => {
        set_trends([
            ...trends,
            <Rcomments
                id={parseInt(id ? id : '0')}
                page={page}
                key={Math.random()}
            />,
        ]);
    }, [page]);
    useEffect(() => {
        if (bottom) set_page(page + 1);
    }, [bottom]);

    return (
        <>
            <div className={style['cmt-ctx']}>
                <TopNavigate />
                <button
                    onClick={() => set_show(!show)}
                    className={style['add']}>
                    Add
                </button>
                {show && (
                    <div className={style['add-item']}>
                        <p>发表评论</p>
                        <textarea
                            onChange={(e) => {
                                set_name(e.target.value);
                            }}
                        />
                        <button
                            onClick={() => {
                                axios
                                    .post('com', {
                                        uid: localStorage.getItem('id'),
                                        tid: 0,
                                        text: name,
                                        pid: id,
                                    })
                                    .then((res) => {
                                        set_show(false);
                                        location.reload();
                                    });
                            }}>
                            发布
                        </button>
                    </div>
                )}
                <article className='p-3'>
                    <div style={{ display: 'none' }}>
                        <Rcomments
                            id={parseInt(id ? id : '0')}
                            page={page + 1}
                        />
                    </div>
                    {trends}
                </article>
            </div>
        </>
    );
}

export default Project;
